<template>
  <!-- <audio ref="audioRef" autoplay src="http://minio.mw.com:39000/lingyang-boot/voice/2023/08/20/1/452165688037381.mp3"></audio> -->
  <audio-player ref="audioPlayerRef" v-bind="$attrs" :audio-list="audioList.map((elm) => elm.url)" @loadedmetadata="handleLoadedMetadata" />
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, nextTick, watch } from "vue"
  import AudioPlayer from "@liripeng/vue-audio-player"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { propTypes } from "/@/utils/propTypes"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useRouter } from "vue-router"
  const router = useRouter()
  const audioPlayerRef = ref<any>()
  const emit = defineEmits(["loaded-metadata"])
  const { createWarningModal, notification } = useMessage()
  const attrs = useAttrs()
  const props = defineProps({
    /**
     * 格式:
     * {
     *   url: "http://www.ytmp3.cn/down/76857.mp3",
     * },
     */
    audioList: propTypes.array.def([]),
  })

  onMounted(() => {})

  onUnmounted(() => {
    console.log("=================================> 组件卸载了", props)
  })
  const handleLoadedMetadata = (e) => {
    const duration = audioPlayerRef.value.duration
    console.log("duration", duration)
    emit("loaded-metadata", { duration })
  }
</script>

<style lang="less" scoped></style>
